<template>
  <div id="area" class="wrapper">
     <el-form class="ur-form mb-2 d-flex" :inline="true" ref="switchForm" style="height: 54px;">
      <el-form-item label="所属行政区" >
        <el-select class="w150" size="small" v-model="regionId_parent" @change="getSubRgions">
          <el-option v-for="(item,index) in regions" :key="index" :label="item.Name" :value="item.Id"></el-option>
        </el-select>
      </el-form-item>
      <el-input placeholder="请输入内容" class="input-with-select w250" size="small" v-model="searchTxt" >
        <el-button  slot="append" class="ur-btn ur-btn-primary" @click="queryFun"><i class="iconfont icon-search"></i>查询</el-button>
      </el-input>
      <el-button class="d-inline-block ur-btn ur-btn-primary ml-2" @click="areaDig=true,isAdd=true"><i class="iconfont icon-add"></i>添加区域</el-button>
     </el-form>

    <div class="mt-3">
      <!--表格-->
      <el-table class="ur-table" :data="getGidData" style="width: 100%" :height="clientHeight-135" highlight-current-row @selection-change="selsChange">
        <el-table-column align="center" type="index" :index="indexMethod" label="序号" width="100"></el-table-column>
        <el-table-column type="selection" width="80"></el-table-column>
        <el-table-column v-for="(v,index) in tables.columns" :prop="v.field" :label="v.title" :width="v.width" align="center" :key="index">
          <template slot-scope="scope">
            {{scope.row[v.field]}}
          </template>
        </el-table-column>
        <el-table-column align="center" width="200">
          <template slot="header" slot-scope="scope">
            <label ><i class="iconfont icon-tianjia"></i>操作</label>
          </template>
          <template slot-scope="scope">
            <el-button class="ur-btn ur-btn-waring d-inline-block">
              <i class="font18 iconfont icon-edit mr-0" @click="handleEdit(scope.row)"></i>
            </el-button>
            <el-button class="ur-btn ur-btn-danger d-inline-block">
              <i class="font18 iconfont icon-delete mr-0" @click="handleDel(scope.$index,scope.row)"></i>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--分页-->
      <div class="mt-3">
        <el-button  class="float-left" type="danger" @click="batchRemove" :disabled="sels.length===0">批量删除
        </el-button>
        <el-pagination class="float-right " @size-change="handleSizeChange" @current-change="handleCurrentChange"
                       layout="total, sizes, prev, pager, next, jumper" :page-sizes="[100,200,500,1000]"
                       :current-page="currentPage" :page-size="pageSize" :total="total"></el-pagination>
      </div>
    </div>

    <el-dialog class="ur-form-dialog" v-el-drag-dialog :title="isAdd?'添加区域':'修改区域'" :visible.sync="areaDig" width="500px" style="margin-top:11vh;"
               @close="closeAreaDialog(false)">
      <addarea v-if="areaDig" @closeAreaDialog="closeAreaDialog($event)" :area="area"></addarea>
    </el-dialog>

  </div>
</template>

<script type="text/ecmascript-6">
  import elDragDialog from 'directive/el-dragDialog'
  import {mapState} from 'vuex'
  import api from 'api/api'
  import addarea from './addarea'

  export default {
    directives:{elDragDialog},
    components: {addarea},
    props: {},
    data() {
      return {
        total: 0,
        currentPage: 1,
        pageSize:100,
        regionId_parent:1,
        searchTxt: '',
        regions:[],
        subRegions:[],
        tables: {
          sel: null,//选中行
          columns: [
            {field: "Name", title: "区域名称", width: null},
            {field: "Maintenance", title: "养护单位", width: null},
            {field: "MaintenanceUser", title: "负责人", width: null},
            {field: "MaintenancePhone", title: "联系电话", width: null}
          ],
        },
        sels: [],
        area:{},
        areaDig:false,
        isAdd:true,
        regionMap:new Map()
      }
    },
    watch: {},
    computed: {
      getGidData() {
        if(this.subRegions.length){
          return this.subRegions.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)
        }
      },
      ...mapState({
        clientHeight: state => state.comm.clientHeight,
        clientWidth: state => state.comm.clientWidth,
        limits:state=>state.user.userInfo.limits
      }),
    },
    methods: {
      indexMethod(index) {
        return index + 1
      },
      handleSizeChange(val) {
        this.pageSize = val
        this.currentPage = 1
      },
      handleCurrentChange(val) {
        this.currentPage = val
      },
      selsChange(sels) {
        this.sels = sels
        this.sels.splice(0, 0)
      },
      handleEdit(row) {
        this.area=row
        this.isAdd=false;
        this.areaDig=true;
      },
      handleDel(index, row) {
        this.$message.info('暂不支持')
       /* this.$confirm('确认删除该区域及该区域所属设施', '提示', {type: 'warning'})
          .then(() => {
            api.fetch('/Region/Delete',[row.Id])
              .then(r=>{
                  this.$message.success({showClose:true,message:'删除成功'})
                  this.tables.data.splice(index, 1)
                  this.queryFun()
              })
          })*/
      },
      closeAreaDialog(v) {
        this.areaDig = v;
      },
      batchRemove() {
        let ids=[]
        this.sels.map(r => ids.push(r.Id))
        this.$confirm('确认删除选中记录吗？', '提示', {type: 'warning'})
          .then(() => {
            api.fetch('/Region/Delete',ids)
              .then(r=>{
                this.$message.success({showClose:true,message:'删除成功'})
                this.queryFun()
              })
          })
      },
      queryFun(){
        this.currentPage = 1
        api.fetch('/ViewInfo/QueryRegionsForTree', {}).then(r => {
          this.regions=r;
          if(r.length){
            this.regionId_parent=r[0].Id;
            for(let i=0;i<r.length;i++){
              this.regionMap.set(r[i].Id,r[i].Childs)
            }
            this.getSubRgions(r[0].Id)
          }
          // this.total = r.length
          // this.tables.data =  r ? r: []
          // this.tables.data.splice(0, 0)
        })
      },
      getSubRgions(id){
        this.subRegions=this.regionMap.get(id)
      }
    },
    created() {
      this.queryFun()
    },
    mounted() {
    }
  }
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
</style>
